<!-- 首页 -->
<template>
	<view class="wrap">
		<cu-custom style="z-index: 9999;" bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>

		<u-notice-bar mode="horizontal" :list="listBar"></u-notice-bar>

		<!-- 提示框 -->
		<u-toast ref="uToast" />

		<view class="text-xxl v1" style="height: 670rpx; position: relative;">

			<view style="width: 100% ;position: absolute; top: 10rpx;">
				<view class="titleImg1 margin-tb-xs">
					<view class="titleZi bg-gradual-them">
						<text class="cuIcon-favor margin-right-sm"></text>
						猫 / 友 / 聚 / 集 / 地
						<text class="cuIcon-favor margin-left-sm"></text>
					</view>
				</view>

				<view style="position: relative;">
					<swiper class="card-swiper"  :current='cardCur' :circular="true"
						vertical="true" :autoplay="false" duration="500" interval="5000" @change="cardSwiper">

						<swiper-item v-for="(item,index) in swiperList" :key="index" 
							:class="cardCur == index ? 'cur' : ''">
							<view class="swiper-item image-banner">
								<image :src="item.moduleImg" mode="aspectFill">
								</image>
							</view>
						</swiper-item>
					</swiper>

					<view class="indication" >
						<block v-for="(item,index) in swiperList" :key="index">
							<view @click="clickItem(index)" class="spot" :class="cardCur == index ? 'active': '' ">
								{{item.moduleName}}
							</view>
						</block>
					</view>

				</view>
			</view>
		</view>

		<view class="titleImg margin-tb-xs">
			<view class="titleZi">
				<text class="cuIcon-evaluate margin-right-sm"></text>
				友 / 情 / 链 / 接
				<text class="cuIcon-evaluate margin-left-sm"></text>
			</view>
		</view>


		<view class="cat-menu" >

			<view class="cu-list menu-avatar margin-bottom">

				<view v-for="(item,index) in linkList" :key="index" class="cu-item" @click="goLink(item.appid)">

					<view class="cu-avatar round lg">
						<image class="cat-head" :src="item.moduleImg" mode="aspectFill">
						</image>
					</view>


					<view class="content" style="padding-left: 10rpx; width: 100%;">
						<view class="text-shadow text-black text-bold">{{item.moduleName}}</view>
					</view>
					<!-- 					<view class="action">
										<view class="text-grey text-xs">3天前</view>
									</view> -->
				</view>

			</view>

		</view>





		<!-- <view class="v2"></view> -->
		<view style="height: 100rpx;"></view>


	</view>




</template>

<script>
	export default {

		data() {
			return {
				pageName: '猫友链接',
				listBar: ['快来加入猫友大家庭吧！❤'],

				modules: '',

				// 轮播图
				Imglist: {},
				isImglist: 0, // 默认轮播图不显示

				// 微信图片
				wxImg: '',
				isWxImg: 0,

				// QQ图片
				qqImg: '',
				isQQImg: 0,

				// 收集表图片
				collectionTableImg: '',
				isCollectionTable: 0,

				//
				cardCur: 0,
				towerStart: 0,
				direction: '',

				// 图片展示  模块数据
				swiperList: [{
					id: 0,
					moduleName: 'zhi',
					moduleImg: ''
				}, ],

				// 友情链接
				linkList: [],
			};
		},
		watch: {},
		mounted() {

		},
		onLoad() {
			this.getModules()

		},
		methods: {


			goLink(appid) {
				uni.navigateToMiniProgram({
					appId: appid,
				})
			},

			getModules() {
				try {
					// this.request('loadModules', 'GET').then(res=>{
					this.$u.api.loadModules({}).then(res => {

						console.log("loadModules:", res)
						if (res.code == 200) {
							// TODO 数据填充
							let a = 0
							let b = 0
							let imgurl = [] // 图片展示
							let links = [] // 友情链接
							for (var i = 0; i < res.data.length; i++) {
								if (res.data[i].moduleType == '展示图片') {
									imgurl[a] = {};
									imgurl[a]['moduleImg'] = this.myimgurl() + res.data[i].moduleImg
									imgurl[a]['moduleName'] = res.data[i].moduleName
									a++
								}
								if (res.data[i].moduleType == '友情链接') {
									links[b] = {};
									links[b]['moduleImg'] = this.myimgurl() + res.data[i].moduleImg
									links[b]['moduleName'] = res.data[i].moduleName
									links[b]['appid'] = res.data[i].remark
									b++
								}
							}

							this.swiperList = imgurl
							console.log("swiperList:", this.swiperList)
							this.linkList = links
							console.log("linkList:", this.linkList)
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								url: ''
							})
						}

					})

				} catch (e) {
					//TODO handle the exception
					console.log("e:", e)

					this.$refs.uToast.show({
						title: '后台繁忙！',
						type: 'error',
						url: ''
					})

				}
			},



			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			clickItem(index) {
				this.cardCur = index;
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},

			// 原来的方法
			// getModule(){

			// 	try{

			// 		this.request('loadModules', 'GET').then(res=>{
			// 			console.log("loadModules:",res)
			// 			if(res.code == 200){
			// 				// TODO 数据填充
			// 				this.modules = [...res.data.map(item=>{

			// 					// 轮播图加工
			// 					if(item.moduleName == '轮播图' && item.moduleStatus == "正常"){
			// 						item.moduleImg = item.moduleImg.split(",")  // 切割
			// 						// this.Imglist = item.moduleImg
			// 						for (var i = 0; i < item.moduleImg.length; i++) {
			// 							this.Imglist[i] = this.myimgurl() + item.moduleImg[i]   // 图片路径
			// 						}
			// 						this.isImglist = 1
			// 					}

			// 					if(item.moduleName == '微信群聊二维码' && item.moduleStatus == "正常"){
			// 						this.wxImg = item.moduleImg
			// 						this.isWxImg = 1
			// 					}

			// 					if(item.moduleName == 'QQ群聊二维码' && item.moduleStatus == "正常"){
			// 						this.qqImg = item.moduleImg
			// 						this.isQQImg = 1
			// 					}

			// 					if(item.moduleName == '猫咪图鉴收集表' && item.moduleStatus == "正常"){
			// 						this.collectionTableImg = item.moduleImg
			// 						this.isCollectionTable = 1
			// 					}


			// 					return item

			// 				})]
			// 				console.log("Imglist:",this.Imglist)
			// 				console.log("modules:",this.modules)

			// 			}else{
			// 				this.$refs.uToast.show({
			// 					title: res.msg,
			// 					type: 'error',
			// 					url: ''
			// 				})
			// 			}

			// 		})

			// 	}catch(e){
			// 		//TODO handle the exception
			// 		console.log("e:",e)

			// 		this.$refs.uToast.show({
			// 			title: '后台繁忙！',
			// 			type: 'error',
			// 			url: ''
			// 		})

			// 	}



			// },
		}
	};
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #f4fffa, #ebfbff);

	}
</style>
<style lang="scss" scoped>
	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}
	
	.cat-menu {
		border-radius: 10px;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		background-color: #fff;
		width: 65%;

		padding: 20rpx;
		margin: auto;
	}

	.titleImg {
		position: relative;
		display: flex;
		height: 62px;
		font-size: 23px;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
		background-size: cover;

		.titleZi {
			font-size: 40rpx;
			-webkit-background-clip: text;
			color: transparent;
			background-image: repeating-linear-gradient(45deg, #e03997, #FECE12);
		}
	}

	.titleImg1 {
		position: relative;
		display: flex;
		height: 62px;
		font-size: 23px;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-image: url(https://tnuiimage.tnkjapp.com/title_bg/title44.png);
		background-size: cover;

		.titleZi {
			font-size: 40rpx;
			-webkit-background-clip: text;
			color: transparent;
		}
	}

	/* 自定义导航栏内容 end */
	/* 轮播文案在外 start*/
	.card-swiper {
		height: 520rpx !important;
		width: 500rpx;
		border-radius: 15rpx;
		overflow: hidden;
		padding-left: 5%;
	}

	.card-swiper swiper-item {
		height: 650rpx;
		width: 100% !important;
		box-sizing: border-box;
		padding: 0rpx;
		border-radius: 15rpx;
		overflow: hidden;
		left: 0rpx !important;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100% !important;
		display: block;
		height: 100%;
		border-radius: 0rpx;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: inline-block;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		color: $them-color-primary;
		background-color: $them-color-bg;
		opacity: 1;
		width: 170rpx;
		height: 70rpx;
		line-height: 75rpx;
		border-radius: 20rpx;
		margin: 18rpx -30rpx !important;
		left: 590rpx;
		right: 0;
		top: -520rpx;
		position: relative;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
	}

	.spot.active {
		color: #FFFFFF;
		opacity: 1;
		background-image: $them-color-gradualthem;
	}

	// 结束

	.image-piccapsule {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top;
		border-radius: 10px 10px 0 0;

		.image-capsule {
			padding: 55px 0px;
			font-size: 20px;
			font-weight: 300;
			position: relative;

			.photographer {
				position: absolute;
				color: #FFFFFF;
				left: 105rpx;
				top: 62rpx;
				font-size: 38rpx;
				letter-spacing: 4rpx;
				font-weight: 500;
				vertical-align: text-bottom;
				opacity: .85;
			}

			.photographerS1,
			.photographerS2 {
				position: absolute;
				color: #FFFFFF;
				font-size: 28rpx;
				opacity: .7;
				font-weight: 500;
			}

			.photographerS1 {
				left: 160rpx;
				bottom: 30rpx;
			}

			.photographerS2 {
				left: 300rpx;
				bottom: 30rpx;
			}
		}
	}



</style>
